<template>
  <el-dialog
    :title="title"
    :visible.sync="showDialog"
    width="48%"
    @close="closeFn"
  >
    <el-form ref="studentForm" label-width="100px" :model="formData" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="归属学科">
            <el-select v-model="formData.subject_id" placeholder="请选择" @change="changeFn">
              <el-option v-for="item in subjectInfo" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="学生姓名" prop="student_name">
            <el-input v-model="formData.student_name" style="width:85%" placeholder="请输入学生姓名" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="formData.student_password" type="password" style="width:85%" :placeholder="placeholder" />
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model.number="formData.student_state">
              <el-radio :label="1">待审核</el-radio>
              <el-radio :label="2">正常</el-radio>
              <el-radio :label="3">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="归属班级">
            <el-select v-model="formData.class_id" placeholder="请确保已选择学科">
              <el-option v-for="item in className" :key="item.id" :label="item.class_name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码" prop="student_phone">
            <el-input v-model.number="formData.student_phone" style="width:85%" placeholder="请输入手机号码" />
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model.number="formData.student_sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="btnOk">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { getClassInfo, addStudentInfo, editStudentInfo } from '@/api/class'
export default {
  name: 'AddStudent',
  data() {
    return {
      showDialog: false,
      formData: {
        // class_id: '',
        // student_name: '',
        // student_password: '',
        student_state: 1,
        // class_name: '',
        // student_phone: '',
        student_sex: 1
      },
      className: [],
      rules: {
        student_name: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' }, {
          min: 2, max: 5, message: '用户姓名为2-5位'
        }],
        student_phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }, {
          pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    ...mapGetters(['subjectInfo']),
    title() {
      return this.formData.id ? '编辑学员信息' : '新增学员信息'
    },
    placeholder() {
      return this.formData.id ? '留空表示不修改' : '默认密码是 姓名+admin88'
    }
  },
  methods: {
    // 下拉选择框值发生改变事事件
    async changeFn(val) {
      // console.log(val)
      const { data } = await getClassInfo({
        subject_id: val,
        page: 1,
        limit: 1000
      })
      console.log(data)
      // 赋值班级名称
      this.className = data.list
    },
    // 提交事件
    async btnOk() {
      const message = this.formData.id ? '编辑成功' : '新增成功'
      // console.log(this.$parent.$parent)
      try {
        await this.$refs.studentForm.validate()
        if (this.formData.id) {
          // 编辑
          await editStudentInfo(this.formData)
        } else {
          // 添加
          await addStudentInfo(this.formData)
        }
        this.$message.success(message)
        this.showDialog = false
        this.$parent.$parent.getStudentInfo()
      } catch (error) {
        console.log(error)
      }
    },
    // 关闭事件
    closeFn() {
      this.formData = {}
      this.$refs.studentForm.resetFields()
    }
  }
}
</script>

<style>

</style>
